// id: 7300
// is_index: "2"
// shop: [,…]
// stick: 2
// title: "温州市鞋业公司十大商家排行榜"
// type_name: "工程类"
// year: 2019
function initRanking(data, num, parent) {
  var el = ''
  for (key in data) {
    var currentData = data[key]
    var flag = (+key + 1) % num
    var items = initRankingItem(currentData.shop, currentData.type_name)
    var temp = [
      '<div class="ranking" ' + (flag ? '' : 'style="margin-right:0;"') + '>',
      '  <div class="ranking-title need-text-overflow" title="'+currentData.title+'">',
      currentData.title,
      '  </div>',
      '  <div class="ranking-item-container" id="ranking-item-container">',
      items,
      '    <div class="ranking-button" id="ranking-' +
        currentData.id +
        '"><span>榜单详情</span></div>',
      '  </div>',
      '</div>'
    ].join('')
    el += temp
  }
  parent.append(el)
  $('.ranking').hover(
    function() {
      var css = {
        height: '517px',
        background:
          'linear-gradient(0deg,rgba(255,246,232,1) 0%,rgba(255,255,255,1) 100%)'
      }
      $(this)
        .find('.ranking-item-container')
        .css(css)
      $(this)
        .find('.ranking-title')
        .css('color', 'rgba(204,58,0,1)')
      $(this)
        .find('.ranking-button')
        .css('background', 'url("../image/picture/ranking_button_hover.png")')
      $(this)
        .find('.ranking-item-rank')
        .css('background', '#FE8E7E')
      $(this)
        .find('.ranking-item')
        .eq(0)
        .focus()
    },
    function() {
      var css = {
        height: '456px',
        background:
          'linear-gradient(0deg,rgba(255,251,245,1) 0%,rgba(255,255,255,1) 100%)'
      }
      $(this)
        .find('.ranking-item-container')
        .css(css)
      $(this)
        .find('.ranking-title')
        .css('color', 'rgba(128,72,8,1)')
      $(this)
        .find('.ranking-button')
        .css('background', 'url("../image/picture/ranking_button.png")')
      $(this)
        .find('.ranking-item-rank')
        .css('background', '#DBA448')
    }
  )
  $('.ranking-item').hover(
    function() {
      var css = {
        width: '290px',
        height: '74px',
        padding: '12px 9px 16px'
      }
      $(this).css(css)
      $(this)
        .find('.ranking-item-main')
        .hide()
      $(this)
        .find('.ranking-item-hover')
        .show()
    },
    function() {
      var css = {
        width: '308px',
        height: '39px',
        padding: 0
      }
      $(this).css(css)
      $(this)
        .find('.ranking-item-hover')
        .hide()
      $(this)
        .find('.ranking-item-main')
        .show()
    }
  )
  $('.ranking-button').click(function() {
    go(
      'rankingDetail.html?list_id=' +
        $(this)
          .attr('id')
          .split('-')[1]
    )
  })
}
// address: ""
// id: 317053
// images: "/20190917/fb5e4b0ca4fb8cbbba14a8ae217904d683d6804a.jpg"
// list_id: 7300
// ranking: 1
// shop_id: 0
// title: "温州嘉汇鞋业有限公司"
function initRankingItem(data, type) {
  var el = ''
  var color = [
    'linear-gradient(180deg,rgba(252,240,211,1) 0%,rgba(253,247,234,1) 100%)',
    'linear-gradient(180deg,rgba(234,234,234,1) 0%,rgba(255,255,255,1) 0%,rgba(230,229,229,1) 0%,rgba(238,235,235,1) 100%)',
    'linear-gradient(180deg,rgba(253,231,217,1) 0%,rgba(255,249,246,1) 100%)'
  ]
  for (key in data) {
    var currentData = data[key]
    var temp = [
      '<div class="ranking-item" ' +
        (+key < 3 ? 'style="background: ' + color[key] + ' ;"' : '') +
        '>',
      '  <div class="ranking-item-main">',
      +key < 3
        ? ' <img class="ranking-item-rank-img" src="./image/icon/ranking_item_' +
          (+key + 1) +
          '.png"/>'
        : '    <div class="ranking-item-rank">' + (+key + 1) + '</div>',
      '    <div class="ranking-item-title need-text-overflow">',
      currentData.title,
      '    </div>',
      '  </div>',
      '  <div class="ranking-item-hover">',
      '    <div class="ranking-item-img"><img class="ranking-item-img" src="' +
      (currentData.images.indexOf('http')>-1
        ? currentData.images
        : URL + currentData.images) + '" /></div>',
      '    <div class="ranking-item-right">',
      '      <div class="ranking-item-title-hover">',
      currentData.title,
      '      </div>',
      '      <div style="white-space:nowrap;">',
      '        <div class="ranking-tag" style="margin-right: 10px;">',
      '          <img src="./image/icon/ranking_item_hover_rank.png" />',
      '          <span>第' + currentData.ranking + '名</span>',
      '        </div>',
      '        <div class="ranking-tag">',
      '          <img src="./image/icon/ranking_item_hover_type.png" />',
      '          <span>' + type + '</span>',
      '        </div>',
      '      </div>',
      '    </div>',
      '  </div>',
      '</div>'
    ].join('')
    el += temp
  }
  return el
}
